<template>
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view v-for="(item, index) in cateList" :key="item.id" class="f-item b-b"
				:class="{ active: index === currentId }" @click="tabtap(item,index)">{{ item.name }}</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside">
			<shopGoods @change="sortsClick"  :goodsList='goodsList' :headerPosition="headerPosition">
			</shopGoods>
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import shopGoods from '@/components/shopgoods.vue';
	export default {
		components: {
			uniLoadMore,
			shopGoods
		},
		data() {
			return {
				coverImg: null,
				tabList: [],
				headerPosition: 'fixed',
				headerTop: '0px',
				loadingType: 'more',
				
				sorts: 0, //右侧排序产品排序方式  0默认排序方式
				
				tabScrollTop: 0,
				currentId: 0, //左侧分类  从0开始
				
				typeIds: '', //点击左侧分类ID
				
				token: '',
				cateList: [],
				goodsList: [],
				p: 1,
				size: 100,
					
			};
		},
		onLoad() {
			this.token = this.$api.get('token');
			this.categoryList();
		},
		methods: {
			sortsClick(e)
			{
				console.log(e);
				this.sorts = e.sorts;
				this.loadData();
			},
			navToDetailPage(item) {
				let id = item.id;
				if (id && id != undefined) {
					uni.navigateTo({
						url: `/pages/goods/menu0/detail?id=${id}`
					});
				}
			},
			//一级分类点击
			tabtap(item, index) {
				console.log(item);
				console.log(index);
				this.currentId = index;
				this.typeIds = item.id;
				this.loadData();
			},
			//分类列表页面
			navTo(typeIds) {
				uni.navigateTo({
					url: `/pages/goods/menu0/list?catid=${typeIds}`
				});
			},
			
			async loadData() {
				const param = {};
				param.token = this.token;
				param.typeid = 0;
				param.catid = this.typeIds;
				param.sorts = this.sorts;
				param.p = this.p;
				param.size = this.size;
				await this.$http.request('Goods', 'goodslist', 'GET', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.goodsList =  res.data.data.list;
						}
					}
				});
			},

			async categoryList() {
				const param = {};
				param.typeid = 0;
				await this.$http.request('Goods', 'categorylist', 'GET', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.cateList =  res.data.data;
							this.typeIds=this.cateList[0].id;
							
							this.loadData();
						}
					}
				});
			}

			
		}
	};
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;

		&.active {
			color: $base-color;
			background: #f8f8f8;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		//padding-left: 20upx;
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;


		.goods-list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx;
			background: #fff;

			.goods-item {
				display: flex;
				flex-direction: column;
				width: 220rpx;
				padding-bottom: 40upx;

				&:nth-child(2n + 1) {
					margin-right: 4%;
				}
			}

			.image-wrapper {
				width: 100%;
				height: 220upx;
				border-radius: 3px;
				overflow: hidden;

				image {
					width: 220rpx;
					height: 220rpx;
					opacity: 1;
					border-radius: 20rpx;
				}

				.posi {
					position: relative;
					top: -200upx;
					left: 135upx;
					width: 200upx;
					height: 200upx;

					border-radius: 20rpx;
				}
			}

			.title {
				font-size: $font-lg;
				color: $font-color-dark;
				line-height: 80upx;
			}

			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 10upx;
				font-size: 24upx;
				color: $font-color-light;
			}

			.price {
				font-size: $font-lg;
				color: $uni-color-primary;
				line-height: 1;
			}
		}



	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		image {
			width: 140upx;
			height: 140upx;
			//border-radius: 70upx;
		}
	}
</style>